{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import split with context %}
{% from "macros.html" import google_play_button with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_title %}{{ ftl('browsers-chromebook-get-firefox-browser') }}{% endblock %}

{% block page_desc %} {{ ftl('browsers-chromebook-so-youve-got') }} {% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('chromebook') }}
{% endblock %}

{% set android_url = play_store_url('firefox', 'firefox-browsers-chromebook') %}

{% block site_header %}
  {% with hide_nav_cta=True %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block sub_navigation %}
 {% include '/firefox/includes/desktop-platform-sub-nav.html' %}
{% endblock %}

{% block content %}
  {% call split(
    image=resp_img('img/firefox/browsers/quantum/browser-v2.jpg',
      srcset={ 'img/firefox/browsers/quantum/browser-high-res-v2.jpg': '2x' },
      optional_attributes={
        'class': 'mzp-c-split-media-asset',
        'width': '537',
        'height': '467'
      }
    ),
    media_after=True,
    block_class='mzp-l-split-hide-media-on-sm-md',
    media_class='mzp-l-split-h-center'
  ) %}
  <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
  <h1 class="mzp-u-title-lg">{{ ftl('browsers-chromebook-get-firefox-browser') }}</h1>
  <p>{{ ftl('browsers-chromebook-so-youve-got') }}</p>

  <div class="mzp-c-menu-list mzp-t-cta mzp-t-download" id="chromebook-download-list">
    <h4 class="mzp-c-menu-list-title">{{ ftl('browsers-chromebook-dropdown-copy') }}</h4>
    <ul class="mzp-c-menu-list-list download-platform-list">
      <li class="mzp-c-menu-list-item">
        <a href="{{ android_url }}" rel="external noopener" class="ga-product-download" data-cta-text="Get Firefox for Android" data-cta-type="firefox_mobile" >
          {{ ftl('browsers-chromebook-browsers-chromebook-get-firefox-for') }}
          <p><small>{{ ftl('browsers-chromebook-x86-based-chromebook') }}</small></p>
        </a>
      </li>
      <li class="mzp-c-menu-list-item t-sumo">
        <a href="https://support.mozilla.org/kb/run-firefox-chromeos?utm_source=www.mozilla.org-firefox-browsers-chromebook&amp;utm_medium=referral&amp;utm_campaign=seo" rel="external noopener" data-cta-text="Install Firefox for Chromebook">
          {{ ftl('browsers-chromebook-get-firefox-desktop') }}
        </a>
      </li>
    </ul>
  </div>
  {% endcall %}


  <section>
    <h2 class="mzp-c-section-heading">{{ ftl('browsers-chromebook-why-get-firefox') }}</h2>
    {% call split(
      image=resp_img('img/firefox/browsers/chromebook/shield.png',
        srcset={ 'img/firefox/browsers/chromebook/shield-high-res.png': '2x' },
        optional_attributes={ 'class': 'mzp-c-split-media-asset'}
      ),
    ) %}
      <p>{{ ftl('browsers-chromebook-while-a-chromebook') }}</p>
      <ul class="mzp-u-list-styled">
        <li>{{ ftl('browsers-chromebook-alwayson-tracking-protection') }}</li>
        <li>{{ ftl('browsers-chromebook-supporting-independent-technology') }}</li>
      </ul>
    {% endcall %}
  </section>

  <section class="mzp-l-content mzp-t-content-lg">
    <h2>{{ ftl('browsers-chromebook-is-it-hard') }}</h2>
    <p>{{ ftl('browsers-chromebook-we-wish-it') }}</p>

    <div class="mzp-l-card-half">
      <div class="mzp-c-card">
        {{ resp_img(
          url='img/firefox/browsers/chromebook/mobile.png',
          srcset={
            'img/firefox/browsers/chromebook/mobile-high-res.png': '2x'
          },
          optional_attributes={
            'class': 'mzp-c-billboard-image',
            'width': '436',
            'height': '464'
          }
        ) }}

        <p>{{ ftl('browsers-chromebook-install-firefox-from') }}</p>
        {{ google_play_button(href=android_url, id='playStoreLink') }}
      </div>

      <div class="mzp-c-card">
        {{ resp_img(
          url='img/firefox/browsers/chromebook/addon.png',
          srcset={
            'img/firefox/browsers/chromebook/addon-high-res.png': '2x'
          },
          optional_attributes={
            'class': 'mzp-c-billboard-image',
            'width': '436',
            'height': '464'
          }
        ) }}

        <p>{{ ftl('browsers-chromebook-install-firefox-as', url='href="https://support.mozilla.org/kb/run-firefox-chromeos?utm_source=www.mozilla.org-firefox-browsers-chromebook&amp;utm_medium=referral&amp;utm_campaign=seo" rel="external noopener" data-cta-text="Install Firefox for Chromebook" '|safe) }}</p>
      </div>
    </div>
  </section>

{% endblock %}

{% block js %}
  {{ js_bundle('chromebook') }}
{% endblock %}
